<template>
  <view class="wrap">
    <uv-gap height="20rpx" bgColor="#F5F5F5"></uv-gap>
    <view class="box">
      <uv-tabs :list="tabList" :current='current' scrollable lineColor='rgba(255,255,255,0)' activeStyle='height: 70rpx; line-height: 70rpx; background: #E43222; border-radius: 70rpx;padding: 0 16rpx;font-size: 26rpx; color: #FFFFFF;' inactiveStyle='height: 70rpx; line-height: 70rpx; background: rgba(185, 185, 185, 0.43); border-radius: 70rpx;padding: 0 16rpx;font-size: 26rpx; color: #000000;' @click="tabClick"></uv-tabs>
      
      <view class="list">
        <view class="item" v-for="(item,index) in list" :key="index">
          <view class="hd">
            <view class="name">{{ item.target_name }}({{ item.target_id }})</view>
            <view class="desc">订单编号：{{ item.order_no }}</view>
            <view class="desc" v-if="item.desc">{{ item.desc }}</view>
          </view>
          <view class="foot">
            <view class="left">
              <view class="price">
                <image src="../../../static/currency.png" class="img"></image>{{ item.pay_coin }}投研币
              </view>
              <view class="status" v-if="item.refund_time">已退款</view>
              <template v-else>
                <template v-if="item.desc ? hasDatePassed(extractDate(item.desc)) : false">
                  <view class="status">已过期</view>
                </template>
                <template v-else>
                  <view class="status" v-if="item.pay_status == 0">待付款</view>
                  <view class="status" v-if="item.pay_status == 1">已付款</view>
                </template>
              </template>
            </view>
            <view class="right" v-if="btnList[current]" @click="goDetail(item)">{{ btnList[current] }}</view>
          </view>
        </view>
      </view>
      <uv-empty :show='showLeng' mode="list" marginTop='200rpx'></uv-empty>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { post } from '@/api';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';

const tabList = ref([
  { name: '加入社群' },
  { name: '打赏' },
  { name: '动态购买' },
  { name: '课程购买' },
  { name: '直播购买' },
  { name: '约调研' }
])
const btnList = ref({
  0: '进入社群',
  1: '',
  2: '查看动态',
  3: '查看课程',
  4: '查看直播',
  5: '查看调研'
})
const urls = {
  0: '/pages/group/yes-detail?id=',
  1: '',
  2: '/pages/dynamic/detail?id=',
  3: '/pages/research/detail?id=',
  4: '',
  5: '/pages/invest/detail?id='
}
let current = ref(0);
let list = ref([]);
let last_page = 0;
let page = 1;
let limit = 15;
let showLeng = ref(false);

onLoad(() => {
  getList();
})
// 上拉加载
onReachBottom(async () => {
  if(last_page < page || last_page == page) return;
  page++
  getList();
})

function getList(){
  const params = {
    page,
    limit,
    type: Number(current.value) + 1
  }
  post('api/order/orderList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      list.value = [...list.value, ...data.data];
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
function tabClick({ index }){
  current.value = index;
  list.value = [];
  page = 1;
  getList();
}
function goDetail(row){
  if(current.value == 0){
    if(row.refund_time || row.pay_status == 0 || hasDatePassed(extractDate(row.desc))){
      urls[current.value] = '/pages/group/not-detail?id='
    }
  }
  if(urls[current.value]){
    uni.navigateTo({
      url: urls[current.value] + row.target_id
    });
  }
}
// 返回true表示已过期
function hasDatePassed(givenDateString) {
  const currentDate = new Date();
  const givenDate = new Date(givenDateString);
  return currentDate > givenDate;
}
function extractDate(str) {
  const startIndex = str.indexOf("：") + 1; // “有效期至：”之后的字符位置
  const date = str.substring(startIndex).trim(); // 从该位置开始截取，并去除两边的空白字符
  return date;
}
</script>

<style lang="scss" scoped>
  .list{
    width: 100%;
    padding: 0 30rpx;
    padding-top: 20rpx;
    .item{
      border: 1px solid #E9E9E9;
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      .foot{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx;
        .left{
          display: flex;
          align-items: center;
          .price{
            font-weight: 400;
            font-size: 24rpx;
            color: #E43222;
            .img{
              width: 24rpx;
              height: 24rpx;
              margin-right: 8rpx;
              vertical-align: middle;
            }
          }
          .status{
            font-weight: 500;
            font-size: 24rpx;
            color: #4F4F4F;
            padding-left: 40rpx;
          }
        }
        .right{
          height: 60rpx;
          line-height: 60rpx;
          background-color: rgba(255, 72, 69, 0.08);
          border-radius: 15rpx;
          border: 1px solid #FF3B38;
          font-weight: 500;
          font-size: 26rpx;
          color: #FF3B38;
          padding: 0 30rpx;
        }
      }
      .hd{
        padding: 30rpx;
        border-bottom: 1px solid #E9E9E9;
        .desc{
          font-weight: 400;
          font-size: 24rpx;
          color: #AAAAAA;
          padding-top: 10rpx;
        }
        .name{
          font-weight: 400;
          font-size: 28rpx;
          color: #000000;
          overflow: hidden; //超出的文本隐藏
          text-overflow: ellipsis; //溢出用省略号显示
          white-space: nowrap;  // 默认不换行；
        }
      }
    }
  }
  .box{
    margin-top: 20rpx;
    background-color: #fff;
  }
</style>